<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../tf-imports/lodash.html">
<link rel="import" href="../tf-imports/plottable.html">

<!--
tf-color-scale is a plumbing component that takes in an array of runs, and produces
an upward-bindable outColorScale, which is a color scale mapping from those runs to
a set of colors.

Right now, the colors are hard-coded and must be manually synchronized with the colors expected in
tf-run-selector. TODO(danmane): we should enshrine the mapping elsewhere.
-->
<dom-module id="tf-color-scale">
  <script>
    (function() {
      // TODO(danmane) - get Plottable team to make an API point for this
      Plottable.Scales.Color._LOOP_LIGHTEN_FACTOR = 0;
      var classColorPairs = [
        ["light-blue", "#03A9F4"],
        ["red"       , "#f44366"],
        ["green"     , "#4CAF50"],
        ["purple"    , "#9c27b0"],
        ["teal"      , "#009688"],
        ["pink"      , "#e91e63"],
        ["orange"    , "#ff9800"],
        ["brown"     , "#795548"],
        ["indigo"    , "#3f51b5"],
      ];
      var classes = _.pluck(classColorPairs, 0);
      var colors = _.pluck(classColorPairs, 1);
      Polymer({
        is: "tf-color-scale",
        properties: {
          runs: Array,
          outClassScale: {
            type: Object,
            notify: true,
            readOnly: true,
            value: function() {
              return new d3.scale.ordinal().range(classes);
            },
            // TODO(danmane): the class scale will not update if the domain changes.
            // this behavior is inconsistent with the ColorScale.
            // in practice we don't change runs after initial load so it's not currently an issue
          },
          outColorScale: {
            type: Object,
            notify: true,
            readOnly: true,
            value: function() {
              var scale = new Plottable.Scales.Color().range(colors);
              scale.onUpdate(this._notifyColorScaleDomainChange.bind(this));
              return scale;
            },
          },
        },
        observers: ["_changeRuns(runs.*)"],
        _changeRuns: function(runs) {
          this.outClassScale.domain(this.runs);
          this.outColorScale.domain(this.runs);
        },
        _notifyColorScaleDomainChange: function() {
          this.notifyPath("outColorScale.domain_path", this.outColorScale.domain());
          this.outColorScale.domain_path = null;
        },
      });
    })();
  </script>
</dom-module>
